<template>
	<div class="item-options-box">
		<div class="options-item">
			<van-radio-group v-model="comValue" @change="changeRadio" :disabled="disabled">
				<van-radio v-for="(item, i) in radioList" :key="i" :name="item.code">
					{{ item.name }}
				</van-radio>
			</van-radio-group>
		</div>
	</div>
</template>

<script>
// 单选组件-数据来源字典
import { mapGetters } from 'vuex'
import { RadioGroup, Radio } from 'vant';
export default {
	name: 'commonRadio',
	components: {
		'van-radio-group':RadioGroup,
		'van-radio':Radio
	},
	props: {
		isDetail: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		code: {
			type: String,
			default: ''
		},
		rules: {
			type: Array,
			default() {
				return [{ required: false, message: '请选择' }]
			}
		},
		// 排列方式  水平horizontal  垂直vertical
		direction: {
			type: String,
			default: 'horizontal'
		},
		// 单选项

		// 自定义选中颜色
		checkedColor: {
			type: String,
			default: '#1989fa'
		},
		// 标题
		label: {
			require: true
		},
		required: {
			require: false,
			default: false
		},
		// 输入框位置
		iptAlign: {
			require: false,
			default: 'left'
		},

		value: {
			require: false
		},
		name: {
			type: String,
			default: ''
		}
	},
	data() {
		return {}
	},
	computed: {
		comValue: {
			get() {
				if (this.isDetail) {
					let target = this.dictList.find((item) => item.code == this.code)
					let res = target.children.filter((item) => {
						return item.code == this.value
					})
					return res[0]?.name
				} else {
					return this.value === null || this.value === undefined
						? this.value
						: this.value + ''
				}
			},
			set(val) {
				this.$emit('update:value', val)
			}
		},
		...mapGetters(['dictList']),
		radioList() {
			let target = this.dictList.find((item) => item.code == this.code)
			let arr = []
			if (target && target.children.length > 0) {
				target.children.forEach((item) => {
					arr.push({ name: item.name, code: item.code })
				})
			}
			return arr
		}
	},
	methods: {
		changeRadio(val) {
			this.$emit('change', { val, name: this.name })
		}
	}
}
</script>
<style lang="less" scoped>
.item-options-box {
	.options-item {
		.van-radio {
			padding: 20px 15px;
			margin: 15px 0;
			border: 1px solid #f0f0f0;
			font-size: 24px;
		}
	}
}
</style>
